<template>
  <div id="box">
      <div class="head">
          <h4>发现</h4>
      </div>
      <div class="container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="推荐" name="first">
                <el-row type="flex" justify="space-around" >
                    <el-col :span="11" v-for="(item,i) in count" :key="i+1">
                      <div class="itemContainer">
                        <div class="photoContainer">
                          <img class="photo" src="http://127.0.0.1:3000/static/img/found/1.jpg" alt="">
                        </div>
                        <div>
                          <h4 class="title">广州的眼泪，摄影远足好去处</h4>
                          <div class="subTitle">
                            <span class="avatarContainer">
                              <img class="avatar" src="http://127.0.0.1:3000/static/img/avatar.jpg" alt="">
                              <p>WWY</p>
                            </span>
                            <span class="viewContainer">
                              <i class="el-icon-view"></i>
                              <p>0</p>
                            </span>
                            
                          </div>
                        </div>
                      </div>
                    </el-col>
                   
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="丽人" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="旅行" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="购物" name="fourth">定时任务补偿</el-tab-pane>
          </el-tabs>
      </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'first',
        count:10,
      };
    },
    methods: {
      handleClick(tab, event) {
      }
    }
  };
</script>
<style scoped lang="less">
    #box{
      background-color: #F5F5F7;
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }
    .title{
      margin:10px 0;
      line-height: 25px;
      font-weight: 600;
    }
    .photoContainer{
      height: 250px;
      overflow: hidden;
      border-radius: 10px;
    }
    .el-col{
      background-color: white;
      margin: 5px;
      border-radius: 10px;
    }
    .el-row{
      flex-wrap: wrap;
    }
    .itemContainer{
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .title{
      padding: 0 7px;
    }
    .photo{
      width: 100%;
      transform: scale(1.5);
      padding-bottom: 50px;
    }
    .avatarContainer{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 34%;
      padding-left: 5px;
    }
    .avatarContainer p{
      font-size: 10px;
    }
    .subTitle{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
    }
    .viewContainer{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 5px;
      width: 20%;
    }
    
    .avatar{
      width: 20px;
      border-radius: 50%;
    }
    .container{
        width: 95%;
    }
    .head{
        background-color: #FFCA0D;
        height: 80px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

</style>